<template>
  <div class="overflow-box">
    <FirstReview @load="ready"></FirstReview>
    <div class="first_box" id="first_box_c"></div>
    <div class="main">
      <div class="smooth-wrapper">
        <HeaderMenu @sendData="handleData"></HeaderMenu>
        <FirstContent></FirstContent>
        <!-- <Demo></Demo> -->
        <SecondContent></SecondContent>
        <ThirdContent></ThirdContent>
        <FourthContent></FourthContent>
        <FifthContent></FifthContent>
        <SixthContent></SixthContent>
        <div class="in_touch"></div>
      </div>
      <Footer></Footer>
    </div>
  </div>
</template>

<script setup>
import FirstReview from '@/page/home/components/FirstReview.vue'
import HeaderMenu from '@/page/home/components/HeaderMenu.vue'
import FirstContent from '@/page/home/components/FirstContent.vue'
import SecondContent from '@/page/home/components/SecondContent.vue'
// import Demo from '@/page/home/components/demo.vue'
import ThirdContent from '@/page/home/components/ThirdContent.vue'
import FourthContent from '@/page/home/components/FourthContent.vue'
import FifthContent from '@/page/home/components/FifthContent.vue'
import SixthContent from '@/page/home/components/SixthContent.vue'
import Footer from '@/page/home/components/Footer.vue'
import { gsap } from 'gsap'
import { ref } from 'vue';


const dataForFirstContent = ref({});

const handleData = (value) => {
  console.log('value', value)
  dataForFirstContent.value = value;
};
function ready() {
  document.getElementById('first_box_c').style.height = '100vh'
  window.scrollTo(0, 0)
  gsap
    .fromTo(
      '.first_box',
      { height: '100vh' },
      {
        height: 0,
        duration: 0.5,
        ease: 'power1.in',
      },
    )
    .then(() => {
      window.scrollTo(0, 0)
    })
}
</script>

<style lang="less" scoped>
.first_box {
  height: 100vh;
  position: relative;
}

.smooth-wrapper {
  inset: 0px;
  width: 100%;
  height: 100%;
  position: relative;

  .main {
    background: rgb(255, 255, 250);
    z-index: 3;

    .in_touch {
      height: 39px;

      @media screen and (min-width: 1025px) {
        height: 2.708vw;
      }
    }
  }
}
.overflow-box{
 width:100vw; 
 height:100vh;
 box-sizing:border-box; 
 overflow-x:hidden; 
 overflow-y:scroll;
}
</style>
